<template>
  <div id="app">
    <h1 v-html="title"></h1>
    <h1>{{ title }}</h1>
    <input v-model="newItem" v-on:keyup.enter="addNew">
    <ul>
      <li v-for="item in items" :class="{ finished: item.isFinished }" v-on:click="toggleFinish(item)">
        {{ item.label }}
      </li>
    </ul>
    <p>
      children tells me: {{ childrenWord }}
    </p>
    <!-- use $dispatch to deliver childdren msg to the father -->
    <!-- <component-a msgfromfather="you die"> -->
    <component-a msgfromfather="you die" v-on:children-tell-me-something="listenToMyBoy">
    <component-a>
    </compnent-a>
  </div>
</template>

<script>
import Storage from './storage'
import ComponentA from './components/ComponentA'

export default {
  data: () => {
    return {
      title: '<span>?</span>Todo List',
      items: Storage.fetch(),
      newItem: '',
      childrenWord: 'something say by child'
    }
  },
  components: { ComponentA },
  methods: {
    toggleFinish: function(item) {
      item.isFinished = !item.isFinished
    },
    addNew: function() {
      this.items.push({ label: this.newItem, isFinished: false })
      this.newItem = ''
      this.$broadcast('onAddNew', this.items)
    },
    listenToMyBoy: function(msg) {
      this.childrenWord = msg
    }
  },
  events: {
    'children-tell-me-something': function(msg) {
      this.childrenWord = msg
    }
  },
  watch: {
    items: {
      handler: function(val, oldVal) {
        Storage.save(val)
      },
      deep: true,
    },
  }
}
</script>

<style>
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#app {
  color: #2c3e50;
  margin-top: -100px;
  max-width: 600px;
  font-family: Source Sans Pro, Helvetica, sans-serif;
  text-align: center;
}

#app a {
  color: #42b983;
  text-decoration: none;
}

.logo {
  width: 100px;
  height: 100px
}

.finished {
  text-decoration: line-through;
}
</style>
